<template>
  <div>
    <el-card>
      <span style="color: pink; font-size: 12px">by 于亦浓</span>
      <!-- 页面头部 -->
      <el-row :gutter="20">
        <el-col :span="21">
          <el-input clearable placeholder="请输入内容" class="inp_value" v-model.trim="username" @clear="getUserList">
          </el-input>
          <el-button size="small" class="but_color" @click="escInput">清空</el-button>
          <el-button type="primary" size="small" @click="searchUser">搜索</el-button>

        </el-col>
        <el-col :span="3">
          <el-button type="green" class="btn_newuser" @click="displayForm"><i class="el-icon-edit"></i>新增用户
          </el-button>
        </el-col>
      </el-row>
      <!-- 消息提示 -->
      <el-alert :title="'共'+counts+'条记录'" type="info" show-icon :closable="false">
        <!-- -->
      </el-alert>
      <!-- 数据列表 -->
      <template>
        <el-table style="width: 100%" :data="UserList">
          <el-table-column prop="id" label="序号" width="110" align="center">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="120" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" align="center">
          </el-table-column>
          <el-table-column prop="username" label="用户名" align="center">
          </el-table-column>
          <el-table-column prop="permission_group_title" label="权限组名称" align="center">
          </el-table-column>
          <el-table-column prop="role" label="角色" align="center">
          </el-table-column>
          <el-table-column prop="" label="操作" align="center">
            <!-- 修改 -->
            <template v-slot={row}>
              <el-button type="primary" icon="el-icon-edit" class="el_but" @click="modifyUser(row)" circle plain>
              </el-button>
              <!-- 删除按钮 -->
              <el-button type="danger" icon="el-icon-delete" class="el_but1" circle v-if="row.id===2?false:true"
                @click="removeUser(row)" plain>
              </el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <!-- 页码 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.page" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pagesize"
          layout="total, prev, pager,next, sizes,jumper" :total="total">
        </el-pagination>
      </div>

    </el-card>

    <!-- 新增用户 -->

    <el-dialog title="创建用户" :visible.sync="addDialogVisible" width="45%">
      <el-form class="ed_int" label-width="80px" ref="addFormRef" :model="addForm" :rules="addFormRules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="addForm.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select class="filter-item" v-model="addForm.permission_group_id" placeholder="请选择活动区域">
            <el-option v-for="item in jurisdictionList" :value="item.id" :key="item.id" :label="item.title">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="介绍" prop="introduce">

          <el-input type="textarea" placeholder="Please input" v-model="addForm.introduce"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户 -->
    <el-dialog title="修改用户" :visible.sync="addDialogVisible1" width="45%">
      <el-form class="ed_int" label-width="80px" ref="addFormRef" :model="xg" :rules="addFormRules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="xg.username"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="xg.email"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="xg.phone"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="xg.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select class="filter-item" v-model="xg.permission_group_id" placeholder="请选择活动区域">
            <el-option v-for="item in jurisdictionList" :value="item.id" :key="item.id" :label="item.title">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="介绍" prop="introduce">

          <el-input type="textarea" placeholder="Please input" v-model="xg.introduce"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="clickModify" plain>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, remove, update, detail } from '@/api/base/users.js'
import { simple } from '@/api/base/permissions.js'
// import { MessageBox } from 'element-ui'
export default {
  components: {
    // MessageBox
  },
  data () {
    return {

      input_value: '',
      queryInfo: {
        query: '',
        page: 1,
        pagesize: 10
      },
      username: '',
      jurisdictionList: [],
      addForm: {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: '',
        phone: '',
        role: '',
        username: ''
      },
      addForm1: {
        id: '',
        email: '',
        phone: '',
        username: '',
        permission_group_title: '',
        role: '',
        account: '',
        avatar: '',
        disabled: ''
      },
      xg: {},
      UserList: [],
      sj1: [],

      total: 0,
      counts: 0,
      addDialogVisible: false,
      addDialogVisible1: false,
      // 表单验证规则
      addFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在3到10之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6到15之间', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
          // { validator: checkEmail, trigger: 'blur' }
        ]

      }
    }
  },

  methods: {
    // 搜索
    async searchUser () {
      if (this.username === '') return this.$message.error('不能为空')
      const res = await list({
        page: 1,
        pagesize: 20,
        username: this.username
      })
      if (res.status !== 200) return this.$message.error('搜索失败')
      this.UserList = res.data.list
      this.total = res.data.counts
      this.counts = res.data.counts
      // console.log(23)
    },
    // 删除
    removeUser (row) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功!')
        this.getUserList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击显示修改用户框
    async modifyUser (row) {
      const res = await detail(row)
      console.log(res.data)
      this.xg = res.data
      this.addDialogVisible1 = true
    },
    // 点击确认修改信息
    async clickModify () {
      const res = await update(this.xg)
      this.addDialogVisible1 = false
      if (res.status !== 200) return this.$message.error('失败')
      this.$message.success('成功')
      this.getUserList()
    },
    // 点击显示添加对话框
    async displayForm () {
      this.addDialogVisible = true
      const res = await simple({ username: '' })
      this.jurisdictionList = res.data
    },
    // 点击确认添加
    async saveAddForm () {
      // 发送 ajax 之前要对数据在进行一次预校验
      const res = await add(this.addForm)
      this.getUserList() // 列表数据更新
      this.addDialogVisible = false // 关闭对话框
      if (res.status !== 200) return this.$message.error('添加失败')
      this.$message.success('添加成功')
    },
    // 清空input框
    escInput () {
      this.username = ''
      this.getUserList()
    },
    // 页码
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.getUserList()
    },
    // 获取数据，渲染页面
    async getUserList () {
      const { data: res } = await list(this.queryInfo)
      this.UserList = res.list
      this.total = res.counts
      this.counts = res.counts
      // this.queryInfo = res
      // console.log(res)
    }

  },
  created () {
    this.getUserList()
  }
}
</script>

<style scoped lang='less'>
.block {
  text-align: right;
}

.ed_int {
  margin-left: 130px;
  margin: 20px 50px 20px 130px;
}
/deep/.el-card {
  margin: 25px 15px;
}
.inp_value {
  width: 200px;
  height: 20px;
  margin-right: 10px;
}
.but_color {
  color: rgb(152, 152, 250);
}
.btn_newuser {
  background-color: rgb(92, 204, 92);
  color: #fff;
  font-size: 12px;
}
.el-icon-edit {
  margin-right: 5px;
}
.el-alert {
  margin: 20px 0;
  color: 12px;
}
</style>
